/**
 * The MIT License (MIT)
 * 无缝滚动
 * @author 透笔度
 * @开源中国 https://my.oschina.net/tbd/blog
 * @码云 https://gitee.com/dgx
 */

const towxImg = require('../../../utils/towxImg');
// pages/seamlessscrolling/seamlessscrolling.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bchange: 2,//变化值，可自定义设置
    bspeed: 100,//速度，可自定义设置
    direction: "horizontal", //  horizontal=水平 vertical=垂直  ，可设置
    horizontal_dire: "left",// direction: "horizontal" 有效，   left =左    right =右，可设置
    vertical_dire: "top",// direction: "vertical" 有效，   top =上    bottom =下，可设置
    strs: ["所有的楼房全部低于3千平米赶快买", "所有的车子全部低于30000一辆", "知道区块链吗，知道比特币吗，赶紧学"],//滚动内容，可自定义设置
    clonestr: [],//无缝衔接容器
    bw: 0,//容器宽度
    bh: 0,//容器高度
    bl: 0,//容器位置 left
    bt: 0,//容器位置 top
    anima: null,
    article: ""
  },
  //无缝滚动函数
  seamlessscrolling: function () {
    var that = this;
    //复制容器
    var clonestr = [];
    for (var i = 0; i < this.data.strs.length; i++) {
      clonestr.push(this.data.strs[i]);
    };
    for (var i = 0; i < this.data.strs.length; i++) {
      clonestr.push(this.data.strs[i]);
    };
    //console.log(clonestr);
    that.setData({ clonestr: clonestr })
    //容器设置 获取设备宽度（可自定义处理）
    wx.getSystemInfo({
      success: function (res) {
        //console.log(res.windowWidth)
        //console.log(res.windowHeight)
        that.setData({ bw: res.windowWidth, bh: 40 })
      }
    })
    //动画
    var anima = setInterval(function () {
      if (that.data.direction == "horizontal") {//水平
        if (that.data.bl - that.data.bchange <= -that.data.bw * that.data.strs.length) {
          that.setData({ bl: 0 })
        } else {
          that.setData({ bl: that.data.bl - that.data.bchange })
        };
      } else if (that.data.direction == "vertical") {//垂直
        if (that.data.bt - that.data.bchange <= -that.data.bh * that.data.strs.length) {
          that.setData({ bt: 0 })
        } else {
          that.setData({ bt: that.data.bt - that.data.bchange })
        };
      };
    }, that.data.bspeed)

    that.setData({ anima });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //无缝滚动函数
    this.seamlessscrolling();

    let code = '```\n<view class="container my-page">\n  <view>无缝滚动</view>\n  <view class="seamlessscrolling" style="height:{{bh}}px;width:{{bw}}px;">\n    <view style="height:{{direction=="vertical"?bh*clonestr.length:bh}}px;width:{{direction=="horizontal"?bw*clonestr.length:bw}}px;{{horizontal_dire}}:{{bl}}px;{{vertical_dire}}:{{bt}}px;">\n      <view wx:for="{{clonestr}}" wx:key="unique" style="height:{{bh}}px;line-height:{{bh}}px;width:{{bw}}px;position:absolute;top:{{direction=="vertical"?index*bh:0}}px;left:{{direction=="horizontal"?index*bw:0}}px;">{{item}}</view>\n    </view>\n  </view>\n</view>\n```\n\n```\nPage({\n  /**\n   * 页面的初始数据\n   */\n  data: {\n    bchange: 2,//变化值，可自定义设置\n    bspeed: 100,//速度，可自定义设置\n    direction: "horizontal", //  horizontal=水平 vertical=垂直  ，可设置\n    horizontal_dire: "left",// direction: "horizontal" 有效，   left =左    right =右，可设置\n    vertical_dire: "top",// direction: "vertical" 有效，   top =上    bottom =下，可设置\n    strs: ["所有的楼房全部低于3千平米赶快买", "所有的车子全部低于30000一辆", "知道区块链吗，知道比特币吗，赶紧学"],//滚动内容，可自定义设置\n    clonestr: [],//无缝衔接容器\n    bw: 0,//容器宽度\n    bh: 0,//容器高度\n    bl: 0,//容器位置 left\n    bt: 0,//容器位置 top\n    anima: null\n  },\n  //无缝滚动函数\n  seamlessscrolling: function () {\n    var that = this;\n    //复制容器\n    var clonestr = [];\n    for (var i = 0; i < this.data.strs.length; i++) {\n      clonestr.push(this.data.strs[i]);\n    };\n    for (var i = 0; i < this.data.strs.length; i++) {\n      clonestr.push(this.data.strs[i]);\n    };\n    //console.log(clonestr);\n    that.setData({ clonestr: clonestr })\n    //容器设置 获取设备宽度（可自定义处理）\n    wx.getSystemInfo({\n      success: function (res) {\n        //console.log(res.windowWidth)\n        //console.log(res.windowHeight)\n        that.setData({ bw: res.windowWidth, bh: 40 })\n      }\n    })\n    //动画\n    var anima = setInterval(function () {\n      if (that.data.direction == "horizontal") {//水平\n        if (that.data.bl - that.data.bchange <= -that.data.bw * that.data.strs.length) {\n          that.setData({ bl: 0 })\n        } else {\n          that.setData({ bl: that.data.bl - that.data.bchange })\n        };\n      } else if (that.data.direction == "vertical") {//垂直\n        if (that.data.bt - that.data.bchange <= -that.data.bh * that.data.strs.length) {\n          that.setData({ bt: 0 })\n        } else {\n          that.setData({ bt: that.data.bt - that.data.bchange })\n        };\n      };\n    }, that.data.bspeed)\n    that.setData({ anima });\n  },\n  /**\n   * 生命周期函数--监听页面加载\n   */\n  onLoad: function (options) {\n    //无缝滚动函数\n    this.seamlessscrolling();\n  },\n  /**\n   * 生命周期函数--监听页面卸载\n   */\n  onUnload: function () {\n    let { anima } = this.data;\n    clearInterval(anima);\n  },\n})\n```\n';

    let article = towxImg.dealWithRichText(code);
    this.setData({ article });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    let { anima } = this.data;
    clearInterval(anima);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})